// 入库管理
<template>
  <div class="InManagement">
    <div style="padding: 15px; background: #f8f8f8">
      <BreadcrumbLayer></BreadcrumbLayer>
    </div>
    <el-row class="table">
      <el-row class="select">
        <el-form :inline="true" :model="formInline" ref="resetFormData" class="demo-form-inline">
          <el-form-item label="入库单号" prop="enterNum">
            <el-input style="width: 150px" v-model="formInline.enterNum" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="入库名称" prop="name">
            <el-input style="width: 150px" v-model="formInline.name" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="入库类型" prop="type">
            <el-select style="width: 150px" v-model="formInline.type" placeholder="请选择">
              <el-option label="采购入库" value="采购入库" />
              <el-option label="销售退货入库" value="销售退货入库" />
              <el-option label="普通入库" value="普通入库" />
              <el-option label="领用归还入库" value="领用归还入库" />
            </el-select>
          </el-form-item>
          <el-form-item label="入库仓库" prop="enterWarehousing">
            <el-select style="width: 150px" v-model="formInline.enterWarehousing" placeholder="请选择">
              <el-option label="仓库01" value="仓库01" />
              <el-option label="仓库02" value="仓库02" />
              <el-option label="仓库03" value="仓库03" />
              <el-option label="仓库04" value="仓库04" />
              <el-option label="仓库05" value="仓库05" />
              <el-option label="仓库06" value="仓库06" />
              <el-option label="仓库07" value="仓库07" />
              <el-option label="仓库08" value="仓库08" />
              <el-option label="仓库09" value="仓库09" />
            </el-select>
          </el-form-item>
          <el-form-item label="选择日期" prop="date">
            <el-date-picker
              v-model="formInline.date"
              type="date"
              value-format="YYYY-MM-DD"
              placeholder="请选择日期"
              style="width: 150px"
            />
          </el-form-item>
          <el-form-item label="制单人员" prop="person">
            <el-input style="width: 150px" v-model="formInline.person" placeholder="请输入" />
          </el-form-item>
          <el-form-item>
            <el-button color="#33b686" style="color: white" :icon="Search" type="primary" @click="onSubmit"
              >查询</el-button
            >
            <el-button type="reset" :icon="Refresh" @click="reset()">重置</el-button>
          </el-form-item>
        </el-form>
      </el-row>
      <el-row>
        <h3>查询结果列表</h3>
      </el-row>
      <el-row class="btn"
        ><el-button color="#33b686" style="color: white" type="primary" @click="dialogVisible1 = true">新增</el-button>
        <el-button color="#33b686" style="color: white">打印</el-button>
        <el-button color="#33b686" style="color: white">导出</el-button>
      </el-row>
      <el-row>
        <el-table
          ref="multipleTableRef"
          :data="tableData"
          :key="tableNum"
          style="width: 100%"
          @selection-change="handleSelectionChange"
          header-align="center"
        >
          <el-table-column type="selection" width="55" />
          <el-table-column align="center" type="index" label="序号" width="80" />
          <el-table-column align="center" property="id" label="入库编号" width="100" />
          <el-table-column align="center" property="name" label="入库单名称" width="100" />
          <el-table-column align="center" property="type" label="入库类型" width="130" />
          <el-table-column align="center" property="count" label="数量" width="80" />
          <el-table-column align="center" property="person" label="制单人员" width="100" />
          <el-table-column align="center" property="date" label="制单时间" width="130" />
          <el-table-column align="center" property="status" label="状态" width="80" />
          <el-table-column align="center" label="操作" width="200">
            <template #default="scope">
              <el-button size="small" @click="handleSee(scope.$index, scope.row)">查看</el-button>
              <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
              <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-row>
    </el-row>
    <!-- 新建模态框 -->
    <el-dialog v-model="dialogVisible1" title="新建" width="75%">
      <el-form :inline="true" :model="form" class="demo-form-inline">
        <el-form-item label="入库单号">
          <el-input style="width: 150px" v-model="form.enterNum" placeholder="请输入" disabled />
        </el-form-item>
        <el-form-item label="数量">
          <el-input style="width: 150px" v-model="form.count" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="入库时间">
          <el-date-picker
            v-model="form.date"
            type="date"
            placeholder="默认今天"
            style="width: 150px"
            value-format="YYYY-MM-DD"
          />
        </el-form-item>
        <el-form-item label="制单人员">
          <el-input style="width: 150px" v-model="form.user" placeholder="默认当前用户" disabled />
        </el-form-item>
        <el-form-item label="所属公司">
          <el-select style="width: 150px" v-model="form.company" placeholder="请选择">
            <el-option label="Zone one" value="shanghai" />
            <el-option label="Zone two" value="beijing" />
          </el-select>
        </el-form-item>
        <el-form-item label="所属部门">
          <el-select style="width: 150px" v-model="form.department" placeholder="请选择">
            <el-option label="Zone one" value="shanghai" />
            <el-option label="Zone two" value="beijing" />
          </el-select>
        </el-form-item>
        <el-form-item label="入库名称">
          <el-input style="width: 150px" v-model="form.name" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="入库类型">
          <el-select style="width: 150px" v-model="form.type" placeholder="请选择">
            <el-option label="采购入库" value="采购入库" />
            <el-option label="销售退货入库" value="销售退货入库" />
            <el-option label="普通入库" value="普通入库" />
            <el-option label="领用归还入库" value="领用归还入库" />
          </el-select>
        </el-form-item>
        <el-form-item label="采购单号">
          <el-select style="width: 150px" v-model="form.purchaseNum" placeholder="请选择">
            <el-option label="001" value="001" />
            <el-option label="002" value="002" />
            <el-option label="003" value="003" />
            <el-option label="004" value="004" />
            <el-option label="005" value="005" />
          </el-select>
        </el-form-item>
        <el-form-item label="备注"
          ><el-input v-model="form.desc" type="textarea" :rows="5" :cols="50" placeholder="请输入" width="300px" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible1 = false">取消</el-button>
          <el-button color="#33b686" style="color: white" type="primary" @click="add()">保存</el-button>
        </span>
      </template>
    </el-dialog>
    <!-- 编辑模态框 -->
    <el-dialog v-model="dialogVisible2" title="编辑" width="75%">
      <el-form :inline="true" :model="form" class="demo-form-inline">
        <el-form-item label="入库单号">
          <el-input style="width: 150px" v-model="form.enterNum" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="数量">
          <el-input style="width: 150px" v-model="form.count" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="入库时间">
          <el-date-picker
            v-model="form.date"
            type="date"
            placeholder="默认今天"
            style="width: 150px"
            value-format="YYYY-MM-DD"
          />
        </el-form-item>
        <el-form-item label="制单人员">
          <el-input style="width: 150px" v-model="form.user" placeholder="默认当前用户" />
        </el-form-item>
        <el-form-item label="所属公司">
          <el-select style="width: 150px" v-model="form.company" placeholder="请选择">
            <el-option label="Zone one" value="shanghai" />
            <el-option label="Zone two" value="beijing" />
          </el-select>
        </el-form-item>
        <el-form-item label="所属部门">
          <el-select style="width: 150px" v-model="form.department" placeholder="请选择">
            <el-option label="Zone one" value="shanghai" />
            <el-option label="Zone two" value="beijing" />
          </el-select>
        </el-form-item>
        <el-form-item label="入库名称">
          <el-input style="width: 150px" v-model="form.name" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="入库类型">
          <el-select style="width: 150px" v-model="form.type" placeholder="请选择">
            <el-option label="采购入库" value="采购入库" />
            <el-option label="销售退货入库" value="销售退货入库" />
            <el-option label="普通入库" value="普通入库" />
            <el-option label="领用归还入库" value="领用归还入库" />
          </el-select>
        </el-form-item>
        <el-form-item label="采购单号">
          <el-select style="width: 150px" v-model="form.purchaseNum" placeholder="请选择">
            <el-option label="001" value="001" />
            <el-option label="002" value="002" />
            <el-option label="003" value="003" />
            <el-option label="004" value="004" />
            <el-option label="005" value="005" />
          </el-select>
        </el-form-item>
        <el-form-item label="备注"
          ><el-input v-model="form.desc" type="textarea" :rows="5" :cols="50" placeholder="请输入" width="300px" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible2 = false">取消</el-button>
          <el-button color="#33b686" style="color: white" type="primary" @click="update()">保存</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
// import inStore from '../../store/in'
import BreadcrumbLayer from '../../components/box-components/BreadcrumbLayer.vue'
import { ref, reactive, computed } from 'vue'
import { ElTable, ElForm, ElMessage, ElMessageBox } from 'element-plus'
import { Search, Refresh } from '@element-plus/icons-vue'
// const mainstore = defineStore('admin', {
//   state: () => {
//     return {}
//   },
//   getters: {},
//   actions: {}
// })
// const store = inStore()

interface InManagement {
  id: string
  name: string
  type: string
  count: number
  person: string
  date: Date
  status: string
  enterWarehousing: string
}
const formInline = reactive({
  enterNum: '',
  name: '',
  type: '',
  enterWarehousing: '',
  date: '',
  person: ''
})
// const formInline = reactive({
//   enterNum: 'R',
//   name: '备件采购库',
//   type: '领用归还入库',
//   enterWarehousing: '仓库01',
//   date: '2023-01-01',
//   person: 'admin'
// })
let tableData: InManagement[] = ref([
  {
    id: 'RK2398130',
    name: '备件采购库',
    type: '采购入库',
    count: 300,
    person: 'admin',
    date: '2023-01-01',
    status: '暂存',
    enterWarehousing: '仓库01'
  },
  {
    id: 'RK2398131',
    name: '备件采购库',
    type: '销售退货入库',
    count: 300,
    person: 'admin',
    date: '2023-01-01',
    status: '暂存',
    enterWarehousing: '仓库01'
  },
  {
    id: 'RK2398132',
    name: '备件采购库',
    type: '普通入库',
    count: 300,
    person: 'admin',
    date: '2023-01-01',
    status: '已完成',
    enterWarehousing: '仓库01'
  },
  {
    id: 'RK2398133',
    name: '备件采购库',
    type: '领用归还入库',
    count: 300,
    person: 'admin',
    date: '2023-01-01',
    status: '已完成',
    enterWarehousing: '仓库01'
  },
  {
    id: 'RK2398134',
    name: '备件采购库',
    type: '采购入库',
    count: 300,
    person: 'admin',
    date: '2023-01-01',
    status: '暂存',
    enterWarehousing: '仓库01'
  },
  {
    id: 'RK2398135',
    name: '备件采购库',
    type: '采购入库',
    count: 300,
    person: 'admin',
    date: '2023-01-01',
    status: '已完成',
    enterWarehousing: '仓库01'
  },
  {
    id: 'RK2398136',
    name: '备件采购库',
    type: '领用归还入库',
    count: 300,
    person: 'admin',
    date: '2023-01-01',
    status: '已完成',
    enterWarehousing: '仓库01'
  },
  {
    id: 'RK2398137',
    name: '备件采购库',
    type: '领用归还入库',
    count: 300,
    person: 'admin',
    date: '2023-01-01',
    status: '已完成',
    enterWarehousing: '仓库01'
  }
])

let form = reactive({
  enterNum: '',
  count: null,
  date: '',
  user: '',
  company: '',
  department: '',
  name: '',
  type: '',
  purchaseNum: '',
  desc: ''
})
const multipleTableRef = ref<InstanceType<typeof ElTable>>()
const multipleSelection = ref<InManagement[]>([])
const resetFormData = ref(null)
let dialogVisible1 = ref(false)
let dialogVisible2 = ref(false)
let tableNum = 0
let cTableData = ref([
  {
    id: 'RK2398130',
    name: '备件采购库',
    type: '采购入库',
    count: 300,
    person: 'admin',
    date: '2023-01-01',
    status: '暂存',
    enterWarehousing: '仓库01'
  },
  {
    id: 'RK2398131',
    name: '备件采购库',
    type: '销售退货入库',
    count: 300,
    person: 'admin',
    date: '2023-01-01',
    status: '暂存',
    enterWarehousing: '仓库01'
  },
  {
    id: 'RK2398132',
    name: '备件采购库',
    type: '普通入库',
    count: 300,
    person: 'admin',
    date: '2023-01-01',
    status: '已完成',
    enterWarehousing: '仓库01'
  },
  {
    id: 'RK2398133',
    name: '备件采购库',
    type: '领用归还入库',
    count: 300,
    person: 'admin',
    date: '2023-01-01',
    status: '已完成',
    enterWarehousing: '仓库01'
  },
  {
    id: 'RK2398134',
    name: '备件采购库',
    type: '采购入库',
    count: 300,
    person: 'admin',
    date: '2023-01-01',
    status: '暂存',
    enterWarehousing: '仓库01'
  },
  {
    id: 'RK2398135',
    name: '备件采购库',
    type: '采购入库',
    count: 300,
    person: 'admin',
    date: '2023-01-01',
    status: '已完成',
    enterWarehousing: '仓库01'
  },
  {
    id: 'RK2398136',
    name: '备件采购库',
    type: '领用归还入库',
    count: 300,
    person: 'admin',
    date: '2023-01-01',
    status: '已完成',
    enterWarehousing: '仓库01'
  },
  {
    id: 'RK2398137',
    name: '备件采购库',
    type: '领用归还入库',
    count: 300,
    person: 'admin',
    date: '2023-01-01',
    status: '已完成',
    enterWarehousing: '仓库01'
  }
])
// 搜索
const onSubmit = () => {
  console.log('formInline!', formInline.enterNum)
  // const { name, type, enterWarehousing, date, person } = formInline
  console.log('formInline.name', formInline.name)
  console.log('formInline.type', formInline.type)
  console.log('formInline.enterWarehousing', formInline.enterWarehousing)
  console.log('formInline.date', formInline.date)
  console.log('formInline.person', formInline.person)
  getSearchTableData()
  // computed(() => {
  //   console.log(searchTableData.value)
  //   tableData = searchTableData.value
  // })
}
// //监听输入框的值，当值为空时调用表格原始数据的函数
// watch(search, (newName, oldName) => {
//   if (newName == '') {
//     fun()
//   }
// })
function getSearchTableData() {
  let searchTableData = ref(
    computed(() =>
      tableData.value.filter(item => {
        return (
          // 过滤全部数据
          item.id.includes(formInline.enterNum.trim()) &&
          item.name.includes(formInline.name.trim()) &&
          item.type.includes(formInline.type.trim()) &&
          item.person.includes(formInline.person.trim()) &&
          item.date.includes(formInline.date.trim()) &&
          item.enterWarehousing.includes(formInline.enterWarehousing.trim())
        )
      })
    )
  )
  console.log(searchTableData.value)
  // tableData.value = []
  tableData.value = searchTableData.value
}
const getTableData = () => {
  tableData.value = []
  tableData.value = cTableData.value
  tableNum++
}

// 重置
const reset = () => {
  toggleSelection()
  resetLineForm()
  getTableData()
}
// 清空查询行内表单
/*
  需要在el-form上绑定一个ref
  需要在el-form-item上绑定一个props
*/
const resetLineForm = () => {
  resetFormData.value.resetFields()
}
// 取消多选
const toggleSelection = (rows?: InManagement[]) => {
  multipleTableRef.value!.clearSelection()
}
const handleSelectionChange = (val: InManagement[]) => {
  multipleSelection.value = val
  console.log('val:', val)
}
// 添加
const add = () => {
  console.log('add')
  form = {}
  // 定义对象，存储从文本框获取到的数据
  const addArray = {
    id: 'RK' + String(parseInt(tableData.value[tableData.value.length - 1].id.slice(2)) + 1),
    name: form.name,
    type: form.type,
    count: form.count,
    person: 'admin',
    date: form.date,
    status: form.desc
  }
  // push方法，添加一条数据到初始数据的数组中
  tableData.value.push(addArray)
  dialogVisible1.value = false
}
// 查看
const handleSee = (index: number, row: InManagement) => {
  console.log(index, row)
}
// 编辑
const handleEdit = (index: number, row: InManagement) => {
  console.log(index, row)
  dialogVisible2.value = true
  form.enterNum = row.id
  form.name = row.name
  form.type = row.type
  form.count = row.count
  form.user = row.person
  form.date = row.date
  form.desc = row.status
}
const update = () => {
  // 定义对象，存储从文本框获取到的数据
  const updateArray = {
    id: form.enterNum,
    name: form.name,
    type: form.type,
    count: form.count,
    person: form.user,
    date: form.date,
    status: form.desc
  }
  const index = tableData.value.findIndex(o => o.id === updateArray.id)
  // 然后删掉index找到的那一条元素，先删，然后再添加文本框里面的数据到数组中
  // splice方法的第三个参数是添加一条新元素到数组里
  console.log('index', index)

  tableData.value.splice(index, 1, updateArray)
  dialogVisible2.value = false
}
// 删除
const handleDelete = (index: number, row: InManagement) => {
  console.log(index, row)
  ElMessageBox.confirm('此操作将永久删除, 是否继续?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(() => {
      tableData.value.splice(index, 1)
      ElMessage({
        type: 'success',
        message: '删除成功!'
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '已取消删除'
      })
    })
}
</script>

<style scoped lang="scss">
.InManagement {
  box-sizing: border-box;
  background: #fff;

  .table {
    box-sizing: border-box;
    margin: 10px 20px;
    > .select {
      padding: 20px;
    }
    > .btn {
      display: flex;
      align-items: center;
      margin-left: 700px;
    }
  }
}
// 修改dialog的样式
::v-deep .el-dialog__header {
  background-color: #00a468;
  margin-right: 0px;
  .el-dialog__title,
  .el-dialog__headerbtn,
  .el-dialog__close {
    color: white;
  }
}
::v-deep .el-dialog__footer {
  text-align: center;
}
</style>
